<template>
  <div id="mapbox"></div>
</template>

<script setup>
import mapboxgl from 'mapbox-gl'
import { onMounted, reactive } from 'vue'
const start = {
  zoom: 1,
  center: [86, 28],
  pitch: 0,
  bearing: 0,
}
const end = {
  zoom: 12.5,
  center: [114.37, 30.48668],
  pitch: 75,
  bearing: 130,
}
/* const myMap = reactive({})
const initMap = () => {
  mapboxgl.accessToken = '9938879b97050be7b20ec0a339af7609'
  myMap.value = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
    center: [-74.5, 40], // starting position [lng, lat]
    zoom: 0, // starting zoom
    projection: 'globe',
    ...start,
  })
  console.log(myMap)
}
onMounted(() => {
  initMap()
}) */
const map = reactive({})
const init = () => {
  mapboxgl.accessToken =
    'pk.eyJ1IjoiYXNoZXJycnIiLCJhIjoiY2w1cTI5aXBtMDdlaDNwbGZpbmt6NDBkciJ9.FDnLPwqNVFdS0vtf76qVpg'
  const map = new mapboxgl.Map({
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-74.0066, 40.7135],
    zoom: 0,
    projection: 'globe',
    // pitch: 45,
    // bearing: -17.6,
    container: 'mapbox',
    ...start,
    // antialias: true,
  })
  map.addControl(new mapboxgl.FullscreenControl())
  map.on('style.load', () => {
    map.setFog({})
    map.addSource('mapbox-dem', {
      type: 'raster-dem',
      url: 'mapbox://mapbox.terrain-rgb',
    })

    map.setTerrain({
      source: 'mapbox-dem',
      exaggeration: 4,
    })
    rotateMap()
  })
  function rotateMap() {
    const zoom = map.getZoom()
    if (!isUserInterface && zoom < 5) {
      let center = map.getCenter()
      center.lng += 10
      map.easeTo({ center, duration: 2000, easing: (n) => n })
    }
  }
  map.on('moveend', () => {
    rotateMap()
  })
  map.on('click', function () {
    isUserInterface = !isUserInterface
    if (isUserInterface) {
      map.stop()
    } else {
      rotateMap()
    }
  })
  let target
  let globalId
  map.on('click', () => {
    setTimeout(() => {
      target = end
      handleFly(target)
    }, 0)
    /* 2、旋转视图 */
    setTimeout(() => {
      rotateCamera()
    }, 10000)
    /* 3、复位 */
    /*  setTimeout(() => {
      target = start
      isUserInterface = false
      handleFly(target)
    }, 16000) */
  })

  let isUserInterface = false
  // const map = scene.map

  /* 1、实现飞行视角 */

  function handleFly(target) {
    map.flyTo({
      essential: true,
      ...target,
      easing: (t) => t,
      duration: 10000,
    })
  }

  function rotateCamera() {
    var value = map.getBearing()
    value += 90
    map.easeTo({
      bearing: value,
      duration: 20000,
      easing: (x) => x,
    })
  }
  return map
}
onMounted(() => {
  map.value = init()
})
// console.log(map)
/* const scene = new Scene({
  id: 'map',
  map: new Mapbox({
    mapInstance: map,
  }),
}) */
// const scene = new L7.Scene({
//   id: 'map',
//   map: new L7.Mapbox({
//     style: 'mapbox://styles/mapbox/satellite-streets-v11',
//     projection: 'globe',
//     ...start,
//   }),
// })
</script>

<style>
@import 'mapbox-gl/dist/mapbox-gl.css';
#mapbox {
  position: absolute;
  /* top: 0; */
  /* bottom: 0; */
  height: 100%;
  width: 100%;
  z-index: 1;
}
</style>
